<!DOCTYPE html>
{% load static %}

{% block css %}
    <style>

        .title {
            color: #050000;
            text-decoration: none;
            font-weight: bold;
            font-size: 16px;
        }

        .panel-body {
            background-image: url("https://tse1-mm.cn.bing.net/th/id/OIP-C.BYAA0l6U_dZ5jGY4JknUOAHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7");
            background-size: cover;
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .item {
            border-radius: 6px;
            width: 342px;
            height: 192px;
            border: 1px solid #dddddd;
            margin: 20px 10px;
            background-repeat: no-repeat;
            background-size: cover;
            box-sizing: border-box;
            padding: 0;
        }

        .up_video {
            display: flex;
        }

        .panel-body > .item:hover {
            border: 1px solid #f0ad4e;
        }

        .info {

            width: 342px;
            padding: 10px 10px;
            display: flex;
            justify-content: space-between;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            color: #8c8c8c;
        }

        .labelbutton {
            display: inline-block;
            background-color: #95c3ea;
            border: none;
            border-radius: 5px;
            text-align: center;
            text-decoration: none;
            color: #000000;
            font-size: 16px;
            margin-left: 50px;
            margin-top: 10px;
            cursor: pointer;
            transition: background-color 0.3s ease-in-out;
            transform: scale(1.5);
            font-family: 宋体, serif;
        }

        .labelbutton:hover {
            background-color: #a292fa;
        }

        .labelbutton2 {
            border-radius: 10px;
            background-color: #e584ca;
            font-family: 宋体, serif;
        }

        .labelbutton2:hover {
            background-color: #f1b9f6;
        }

        .panel-body > .item > .info a {
            text-decoration: none;
        }
    </style>
{% endblock %}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ way }}</title>
    <script src="../static/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/manage.css' %}">
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
</head>
<body>

<nav class="navbar navbar-av">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'showlist' way='知识' %}"><
                <返回
            </a>
            <a href="{% url 'showlist' way='知识' %}">
                <button class="labelbutton">
                    知识
                </button>
            </a>
            <a href="{% url 'showlist' way='游戏' %}">
                <button class="labelbutton">
                    游戏
                </button>
            </a>
            <a href="{% url 'showlist' way='美食' %}">
                <button class="labelbutton">
                    美食
                </button>
            </a>
            <a href="{% url 'showlist' way='体育' %}">
                <button class="labelbutton">
                    体育
                </button>
            </a>
            <a href="{% url 'showlist' way='生活' %}">
                <button class="labelbutton">
                    生活
                </button>
            </a>
            <a href="{% url 'showlist' way='虚拟主播' %}">
                <button class="labelbutton">
                    虚拟主播
                </button>
            </a>
            <a href="{% url 'showlist' way='影视' %}">
                <button class="labelbutton">
                    影视
                </button>
            </a>
            <a href="{% url 'showlist' way='原神' %}">
                <button class="labelbutton">
                    原神
                </button>
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">用户：{{ request.user_object.username }} <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="{% url 'index' %}">首 页</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="{% url 'logout' %}">退 出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>


{% block content %}
    <div class="panel panel-default">
        <div class="panel-heading" style="background-color: #7de4f5;border: 0px">
            <input type="text" id="label">
            <button onclick="searchbylabel()" class="labelbutton2">按标签筛选</button>
            <button onclick="searchbyname()" class="labelbutton2">按字段搜索（UP主或标题）</button>
            {{ way }}
        </div>
        {% if x == '1' %}
            <div class="up_video">
                {% for item in up_list %}
                    <div style="width: 336px;margin: 50px">
                        <a href="{% url 'upvideo' up_name=item.up_name %}" style="display: flex">
                            <div class="item"
                                 style="background-image:url('{{ item.head_link }}');border-radius: 50%;width:100px; height:100px;">
                            </div>
                            <span style="margin-top: 60px;font-size: 25px;font-family: 方正姚体,serif">up主：{{ item.up_name }}</span>
                        </a>


                        <a href="{% url 'showdetail' video_name=item.video_name %}">
                            <div class="item" style="background-image:url('{{ item.pic_link }}')">
                            </div>
                        </a>
                        <div class="info">
                            <div>
                            <span style="color: #020000;float: initial;">
                                <a href="{% url 'showdetail' video_name=item.video_name %}" class="title"
                                   style="color: #050000;">
                                {{ item.video_name }}
                                </a>
                                播放量：{{ item.video_views }}
                            </span>
                            </div>
                        </div>
                    </div>

                {% endfor %}
            </div>

            <div class="panel-body" style="" id="list-container">
                {% for item in list %}
                    <div>
                        <a href="{% url 'showdetail' video_name=item.video_name %}">
                            <div class="item" style="background-image:url('{{ item.pic_link }}')">
                            </div>
                        </a>
                        <div class="info">
                            <div>
                            <span style="color: #020000;float: initial;">
                                <a href="{% url 'showdetail' video_name=item.video_name %}" class="title"
                                   style="color: #050000;">
                                {{ item.video_name }}
                                </a>
                                播放量：{{ item.video_views }}
                            </span>
                            </div>
                        </div>
                    </div>

                {% endfor %}
            </div>
            </div>
        {% elif x == '0' %}
            <p style="font-size: 100px ;color: #ac2925;text-align: center;margin-top: 200px ;">没有结果</p>

        {% endif %}
{% endblock %}
{% block js %}
    <script>
        function searchbylabel() {
            var text = document.getElementById("label").value;
            if (text.length === 0) {
                alert('输入不能为空')
                return
            }

            var url = "{% url 'showlist' way='1' %}".replace('1', encodeURIComponent(text));
            window.location.href = url;
        }

        function searchbyname() {
            var text = document.getElementById("label").value;
            if (text.length === 0) {
                alert('输入不能为空')
                return
            }
            var url = "{% url 'search' piece='1' %}".replace('1', encodeURIComponent(text));
            window.location.href = url;
        }


    </script>
    <script>
        (function fairyDustCursor() {

            var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
            var width = window.innerWidth;
            var height = window.innerHeight;
            var cursor = {x: width / 2, y: width / 2};
            var particles = [];

            function init() {
                bindEvents();
                loop();
            }


            function bindEvents() {
                document.addEventListener('mousemove', onMouseMove);
                window.addEventListener('resize', onWindowResize);
            }

            function onWindowResize(e) {
                width = window.innerWidth;
                height = window.innerHeight;
            }

            function onMouseMove(e) {
                cursor.x = e.clientX;
                cursor.y = e.clientY;

                addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
            }

            function addParticle(x, y, color) {
                var particle = new Particle();
                particle.init(x, y, color);
                particles.push(particle);
            }

            function updateParticles() {


                for (var i = 0; i < particles.length; i++) {
                    particles[i].update();
                }


                for (var i = particles.length - 1; i >= 0; i--) {
                    if (particles[i].lifeSpan < 0) {
                        particles[i].die();
                        particles.splice(i, 1);
                    }
                }

            }

            function loop() {
                requestAnimationFrame(loop);
                updateParticles();
            }


            function Particle() {

                this.character = "*";
                this.lifeSpan = 120; //ms
                this.initialStyles = {
                    "position": "fixed",
                    "display": "inline-block",
                    "top": "0px",
                    "left": "0px",
                    "pointerEvents": "none",
                    "touch-action": "none",
                    "z-index": "10000000",
                    "fontSize": "25px",
                    "will-change": "transform"
                };


                this.init = function (x, y, color) {

                    this.velocity = {
                        x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
                        y: 1
                    };

                    this.position = {x: x + 10, y: y + 10};
                    this.initialStyles.color = color;

                    this.element = document.createElement('span');
                    this.element.innerHTML = this.character;
                    applyProperties(this.element, this.initialStyles);
                    this.update();

                    document.querySelector('.js-cursor-container').appendChild(this.element);
                };

                this.update = function () {
                    this.position.x += this.velocity.x;
                    this.position.y += this.velocity.y;
                    this.lifeSpan--;

                    this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px, 0) scale(" + (this.lifeSpan / 120) + ")";
                }

                this.die = function () {
                    this.element.parentNode.removeChild(this.element);
                }

            }


            function applyProperties(target, properties) {
                for (var key in properties) {
                    target.style[key] = properties[key];
                }
            }

            if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) init();
        })();
    </script>
    <script>
        var stop, staticx;
        var img = new Image();
        img.src = "";

        function Sakura(x, y, s, r, fn) {
            this.x = x;
            this.y = y;
            this.s = s;
            this.r = r;
            this.fn = fn;
        }

        Sakura.prototype.draw = function (cxt) {
            cxt.save();
            var xc = 40 * this.s / 4;
            cxt.translate(this.x, this.y);
            cxt.rotate(this.r);
            cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
            cxt.restore();
        }

        Sakura.prototype.update = function () {
            this.x = this.fn.x(this.x, this.y);
            this.y = this.fn.y(this.y, this.y);
            this.r = this.fn.r(this.r);
            if (this.x > window.innerWidth ||
                this.x < 0 ||
                this.y > window.innerHeight ||
                this.y < 0
            ) {
                this.r = getRandom('fnr');
                if (Math.random() > 0.4) {
                    this.x = getRandom('x');
                    this.y = 0;
                    this.s = getRandom('s');
                    this.r = getRandom('r');
                } else {
                    this.x = window.innerWidth;
                    this.y = getRandom('y');
                    this.s = getRandom('s');
                    this.r = getRandom('r');
                }
            }
        }

        SakuraList = function () {
            this.list = [];
        }
        SakuraList.prototype.push = function (sakura) {
            this.list.push(sakura);
        }
        SakuraList.prototype.update = function () {
            for (var i = 0, len = this.list.length; i < len; i++) {
                this.list[i].update();
            }
        }
        SakuraList.prototype.draw = function (cxt) {
            for (var i = 0, len = this.list.length; i < len; i++) {
                this.list[i].draw(cxt);
            }
        }
        SakuraList.prototype.get = function (i) {
            return this.list[i];
        }
        SakuraList.prototype.size = function () {
            return this.list.length;
        }

        function getRandom(option) {
            var ret, random;
            switch (option) {
                case 'x':
                    ret = Math.random() * window.innerWidth;
                    break;
                case 'y':
                    ret = Math.random() * window.innerHeight;
                    break;
                case 's':
                    ret = Math.random();
                    break;
                case 'r':
                    ret = Math.random() * 6;
                    break;
                case 'fnx':
                    random = -0.5 + Math.random() * 1;
                    ret = function (x, y) {
                        return x + 0.5 * random - 1.7;
                    };
                    break;
                case 'fny':
                    random = 1.5 + Math.random() * 0.7
                    ret = function (x, y) {
                        return y + random;
                    };
                    break;
                case 'fnr':
                    random = Math.random() * 0.03;
                    ret = function (r) {
                        return r + random;
                    };
                    break;
            }
            return ret;
        }

        function startSakura() {

            requestAnimationFrame = window.requestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                window.oRequestAnimationFrame;
            var canvas = document.createElement('canvas'),
                cxt;
            staticx = true;
            canvas.height = window.innerHeight;
            canvas.width = window.innerWidth;
            canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
            canvas.setAttribute('id', 'canvas_sakura');
            document.getElementsByTagName('body')[0].appendChild(canvas);
            cxt = canvas.getContext('2d');
            var sakuraList = new SakuraList();
            for (var i = 0; i < 50; i++) {
                var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
                randomX = getRandom('x');
                randomY = getRandom('y');
                randomR = getRandom('r');
                randomS = getRandom('s');
                randomFnx = getRandom('fnx');
                randomFny = getRandom('fny');
                randomFnR = getRandom('fnr');
                sakura = new Sakura(randomX, randomY, randomS, randomR, {
                    x: randomFnx,
                    y: randomFny,
                    r: randomFnR
                });
                sakura.draw(cxt);
                sakuraList.push(sakura);
            }
            stop = requestAnimationFrame(function () {
                cxt.clearRect(0, 0, canvas.width, canvas.height);
                sakuraList.update();
                sakuraList.draw(cxt);
                stop = requestAnimationFrame(arguments.callee);
            })
        }

        window.onresize = function () {
            var canvasSnow = document.getElementById('canvas_snow');
            canvasSnow.width = window.innerWidth;
            canvasSnow.height = window.innerHeight;
        }

        img.onload = function () {
            startSakura();
        }

        function stopp() {
            if (staticx) {
                var child = document.getElementById("canvas_sakura");
                child.parentNode.removeChild(child);
                window.cancelAnimationFrame(stop);
                staticx = false;
            } else {
                startSakura();
            }
        }
    </script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

{% endblock %}
</body>
</html>
